<template>
	<view class="content">
		<!-- 主容器 start -->
		<view class="banner-box">
			<!-- top banner  height="436"-->
			<u-swiper :list="bannerList" duration="1000" height="1000" @click="goBanner" :circular="true"></u-swiper>
		</view>
		<view class="userInfo" v-if="isLogin == 1">
			<view class="user">
				<image :src="userInfo.avatar" mode=""></image>
				<text>{{ userInfo.nickname }}</text>
			</view>
			<view style="flex: 1;">
				<view class="integralBox">
					<view class="integral">
						<view class="grade">
							<view>会员等级</view>
							<view class="flex-c-c" v-if="userInfo.grade=='青铜'" style="color: #009594;">
								<image src="../../static/member_icon/icon17.png" mode="widthFix"></image>
								<text>青铜会员</text>
							</view>
							<view class="flex-c-c" v-if="userInfo.grade=='白银'" style="color: #b6bec9;">
								<image src="../../static/member_icon/icon18.png" mode="widthFix"></image>
								<text>白银会员</text>
							</view>
							<view class="flex-c-c" v-if="userInfo.grade=='黄金'" style="color: #D8AC40;">
								<image src="../../static/member_icon/icon1.png" mode="widthFix"></image>
								<text>黄金会员</text>
							</view>
							<view class="flex-c-c" v-if="userInfo.grade=='白金'" style="color: #7663f7;">
								<image src="../../static/member_icon/icon16.png" mode="widthFix"></image>
								<text>白金会员</text>
							</view>
							<view class="flex-c-c" v-if="userInfo.grade=='钻石'" style="color: #23a0e1;">
								<image src="../../static/member_icon/icon15.png" mode="widthFix"
									style="width: 35rpx;height: 30rpx;"></image>
								<text>钻石会员</text>
							</view>
						</view>
						<text>经验值：{{ userInfo.exp }}/{{ userInfo.target_exp }}</text>
					</view>
				</view>
				<view class="integralBox" style="margin: 0;">
					<view class="integral">
						<text>剩余积分</text>
						<text>{{ userInfo.integral }}</text>
					</view>
					<view class="btn" @click="navTo">
						积分换礼
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="container-box">
			<!-- 内容区 产品、商店板块 -->
			<view class="sort-img-item-box" v-for="(item,index) in sortList" @click="goSortClick(item.path)"
				:key="index">

				<image :src="item.url" mode="aspectFill"></image>
			</view>
			<view class="tarbar-list-box flex-w-b">
				<!-- 4个tarbs -->
				<view class="tarbar-item-box" v-for="(item,index) in tarbarList"
					@click="goTarClick(item.path,item.value,item.type, item.isLogin)" :key="index">
					<image :src="item.url" mode=""></image>
					<text>{{item.value}}</text>
				</view>
			</view>
			<view class="bottom-more-box">
				<!-- 底部大咖分享（查看更多） -->
				<view class="top-title-box">
					<text>大咖分享</text>
					<view class="right-more-box" @click="goSeeMore">
						<text>查看更多</text>
						<image src="../../static/index_icon/icon9.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="button-info-box" @click="goSeeMore">
					<!-- 					<view class="text-info-box">
						<view class="top-txt-box">
							<text class="ellipsis2">{{bigShotShare.title}}</text> 
							<text>分享人：{{bigShotShare.author}}</text> 
						</view>
						<view class="bottom-but-box">
							<view class="xq-but-box" @click.stop="goDetails">
								<text>查看详情 >></text>
							</view>
						</view>
					</view> -->
					<image @click.stop="goDetails" class="ims" :src="bigShotShare.image_input" mode=""></image>
				</view>
			</view>
		</view>
		<!-- end -->
		<button class="u-reset-button concat-box" open-type="contact">
			<image class="concat-icon" src="../../static/icon_concat.png" mode=""></image>
			<text>在线客服</text>
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: '',
				userInfo: {}, // 用户信息
				bannerList: [], //top bannerList
				bigShotShare: {}, //大咖分享
				sortList: [{
						url: '../../static/index_icon/icon2.png',
						path: '../../pageIndex/productInfo/productInfo'
					},
					// {url:'../../static/index_icon/icon3.png',path:'../../pageIndex/storeInfo/storeList'},
				],
				// tarbarList:[ //4个tbrbar
				// 	// {url:'../../static/index_icon/icon4.png',value:'当季新款',path:'../../pageIndex/goodsList/goodsStyleList',type:'new'},
				// 	// {url:'../../static/index_icon/icon5.png',value:'口碑爆款',path:'../../pageIndex/goodsList/goodsStyleList',type:'best'},
				// 	// {url:'../../static/index_icon/icon6.png',value:'积分商城',path:'../../pageIndex/integralZone/integralZone',type:'', isLogin: true},
				// 	// {url:'../../static/index_icon/icon7.png',value:'最新活动',path:'../../pageIndex/latestActivity/latestActivity',type:''},
				// ]

				tarbarList: [ //4个tbrbar
					{
						url: '../../static/index_icon/icon6.png',
						value: '积分商城',
						path: '../../pageIndex/integralZone/integralZone',
						type: '',
						isLogin: true
					},
					{
						url: '../../static/icon_100.png',
						value: '球杆认证',
						path: '/pageMember/tarbar/clubAttestation',
						type: '',
						isLogin: true
					},
					{
						url: '../../static/index_icon/icon7.png',
						value: '最新活动',
						path: '../../pageIndex/latestActivity/latestActivity',
						type: ''
					},
				]
			}
		},
		onLoad() {
			uni.showLoading({
				title: "加载中"
			});
		},
		onShow() {
			this.getBannerDataApi();
			this.getBigShotShareApi();
			this.getUserAddress();
			this.getUserInfo();
			this.isLogin = uni.getStorageSync('isLogin')
		},
		onShareAppMessage: function() {

		},
		onShareTimeline: function() {

		},
		methods: {
			getUserInfo() { //获取用户信息
				if (uni.getStorageSync('isLogin')) {
					this.$u.api.userInfosApi({}).then(res => {
						if (res.code == 1) {
							console.log(res.data)
							this.userInfo = res.data;
						}
					});
				}
			},
			getBannerDataApi() { //获取顶部banner数据
				this.$u.api.bannerDataApi({}).then(res => {
					if (res.code == 1) {
						res.data.forEach(resc => {
							resc.image = resc.image.replace(/\\/, '/');
						});
						this.bannerList = res.data;
					}
				});
			},
			getBigShotShareApi() { //获取底部大咖分享数据
				this.$u.api.bigShotShareApi({}).then(res => {
					if (res.code == 1) {
						this.bigShotShare = res.data;
					}
				});
			},
			navTo: function() {
				uni.navigateTo({
					url: '/pageIndex/integralZone/integralZone'
				})
			},
			getUserAddress() { // 获取用户地址位置
				let _this = this;
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					altitude: true,
					success: function(res) {
						console.log('获取用户地理信息：', res);
						_this.$u.api.getCurrentCityApi({
							long: res.longitude,
							lat: res.latitude
						}).then(resc => {
							if (resc.code == 1) {
								resc.data.latitude = res.latitude;
								resc.data.longitude = res.longitude;
								uni.setStorageSync('city', resc.data);
							}
						});
					},
				})
			},
			goBanner(e) {
				let type = this.bannerList[e].type;
				let linkId = this.bannerList[e].link_id;
				if (type == 1 && linkId != 0) {
					this.$gourl(`/pageCart/goodsInfo/goodsInfo?goodsId=${linkId}`);
				} else if (type == 2) {
					if (linkId != 0) {
						if (uni.getStorageSync('isLogin')) {
							this.$gourl(`/pageIndex/latestActivity/activityDetails?activityId=${linkId}`);
						} else {
							this.$showToast('请登录');
							setTimeout(function() {
								uni.navigateTo({
									url: '/pageMember/login/login'
								})
							}, 1500)
						}
					} else {
						this.$gourl(`/pageIndex/latestActivity/latestActivity`);
					}
				} else if (type == 3) {
					this.$gourl(`/pageIndex/bigCoffeeShare/${linkId? `shareDetails?id=${linkId}` : 'bigCoffeeShare'}`);
				} else {
					return;
				}
			},
			goSortClick(path) { //产品/商店跳转
				this.$gourl(path);
			},
			goTarClick(path, value, type, isLogin) { //4个tarbar跳转
				console.log(isLogin)
				if (isLogin) {
					if (!uni.getStorageSync('isLogin')) {
						uni.navigateTo({
							url: '/pageMember/login/login'
						})
					} else {
						this.$gourl(`${path}?dynTitle=${value}&type=${type}`);
					}
					return
				}
				this.$gourl(`${path}?dynTitle=${value}&type=${type}`);
			},
			goSeeMore() { //查看更多
				this.$gourl('../../pageIndex/bigCoffeeShare/bigCoffeeShare');
			},
			goDetails() {
				this.$gourl(`../../pageIndex/bigCoffeeShare/shareDetails?id=${this.bigShotShare.article_id}`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userInfo {
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.080);
		margin: 0 20rpx 60rpx 20rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;

		.user {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 0 60rpx 0 0;

			image {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
			}

			text {
				font-size: 30rpx;
			}
		}

		.integralBox {
			display: flex;
			align-items: center;
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.0800);
			margin: 0 0 20rpx 0;
			padding: 20rpx;

			.integral {
				display: flex;
				flex-direction: column;
				flex: 1;

				text {
					&:nth-child(1) {
						font-size: 24rpx;
					}

					&:nth-child(2) {
						font-size: 20rpx;
						margin: 22rpx 0 0 0;
					}
				}

				.grade {
					display: flex;
					align-items: center;

					view {
						&:nth-child(1) {
							flex: 1;
						}

						image {
							width: 39rpx;
							height: 28rpx;
							margin: 0 8rpx 0 0;
						}

						text {
							margin: 0;
						}
					}
				}
			}

			.btn {
				display: flex;
				align-items: center;
				height: 50rpx;
				background: #D8AC40;
				border-radius: 25px;
				color: white;
				padding: 0 20rpx;
				font-size: 24rpx;

				.u-icon {
					margin: 0 0 0 8rpx;
				}
			}
		}
	}

	// <view class="userInfo">
	// 	<view class="user">
	// 		<image :src="userInfo.avatar" mode=""></image>
	// 		<text>{{ userInfo.nickname }}</text>
	// 	</view>
	.content {
		width: 100%;
		font-family: Microsoft YaHei;
		box-sizing: border-box;

		.banner-box {
			margin-bottom: 60rpx;
		}

		.container-box {
			padding: 0 20rpx;

			.sort-img-item-box {
				margin-bottom: 50rpx;
				line-height: 0;

				image {
					width: 100%;
					height: 300rpx;
					border-radius: 20rpx;
				}
			}

			.tarbar-list-box {
				margin-bottom: 30rpx;

				.tarbar-item-box {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
					background: #ffffff;
					// width: 344rpx;
					width: 230rpx;
					height: 240rpx;
					margin-bottom: 25rpx;

					image {
						width: 80rpx;
						height: 80rpx;
						margin-bottom: 20rpx;
					}
				}
			}

			.bottom-more-box {
				color: #ffffff;

				.top-title-box {
					display: flex;
					padding: 20rpx 0 20rpx 30rpx;
					background: #000000;
					font-size: 36rpx;
					font-weight: bold;
					font-style: italic;

					text {
						flex: 1;
					}

					.right-more-box {
						flex: 0.25;
						align-self: center;
						font-style: normal;
						font-size: 24rpx;
						font-weight: 400;

						image {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}

				.button-info-box {
					position: relative;

					.text-info-box {
						position: absolute;
						z-index: 10;
						width: 100%;
						display: flex;
						flex-direction: column;
						font-weight: bold;

						.top-txt-box {
							height: 300rpx;
							padding: 30rpx 25rpx 30rpx 25rpx;

							text:first-child {
								font-size: 36rpx;
								margin-bottom: 10rpx;
							}

							text:last-child {
								font-size: 24rpx;
							}
						}

						.bottom-but-box {
							padding: 0 30rpx;
							display: flex;
							justify-content: flex-end;

							.xq-but-box {
								padding: 15rpx 30rpx;
								border-radius: 10rpx;
								border: 1rpx solid #ffffff;
								font-size: 28rpx;
							}
						}
					}

					.ims {
						position: absolute;
						top: 0;
						width: 100%;
						height: 400rpx;
						margin-bottom: 20rpx;
					}

					// .ims::after{position: absolute;top: 0;content: '';display: block;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);}
				}
			}
		}

		.concat-box {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-color: #ffffff;
			position: fixed;
			right: 20rpx;
			bottom: 100rpx;
			box-shadow: 0rpx 10rpx 18rpx 0rpx rgba(0, 0, 0, 0.1);
			font-size: 18rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;

			.concat-icon {
				width: 42rpx;
				height: 42rpx;
				margin-bottom: 16rpx;
			}
		}
	}
</style>